.lk-notification {
  --lk-notification-width: 330px;
  --lk-notification-padding: 14px 26px 14px 13px;
  --lk-notification-radius: 8px;
  --lk-notification-shadow: var(--lk-box-shadow-light);
  --lk-notification-border-color: var(--lk-border-color-lighter);
  --lk-notification-icon-size: 24px;
  --lk-notification-close-font-size: var(--lk-message-close-size, 16px);
  --lk-notification-content-font-size: var(--lk-font-size-base);
  --lk-notification-content-color: var(--lk-text-color-regular);
  --lk-notification-title-font-size: 16px;
  --lk-notification-title-color: var(--lk-text-color-primary);
  --lk-notification-close-color: var(--lk-text-color-secondary);
  --lk-notification-close-hover-color: var(--lk-text-color-regular);
}

.lk-notification {
  display: flex;
  width: var(--lk-notification-width);
  padding: var(--lk-notification-padding);
  border-radius: var(--lk-notification-radius);
  box-sizing: border-box;
  border: 1px solid var(--lk-notification-border-color);
  position: fixed;
  background-color: var(--lk-bg-color-overlay);
  box-shadow: var(--lk-notification-shadow);
  /* transition: opacity var(--lk-transition-duration),
    transform var(--lk-transition-duration), right var(--lk-transition-duration),
    top 0.4s, bottom var(--lk-transition-duration); */
  transition: opacity var(--lk-transition-duration),
    transform var(--lk-transition-duration), right var(--lk-transition-duration),
    top 0.4s;
  overflow: hidden;
  right: 10px;

  .lk-notification__icon {
    height: var(--lk-notification-icon-size);
    width: var(--lk-notification-icon-size);
    font-size: var(--lk-notification-icon-size);
    color: var(--lk-notification-icon-color);
  }

  .lk-notification__text {
    margin: 0 10px;

    .lk-notification__title {
      font-weight: 700;
      font-size: var(--lk-notification-title-font-size);
      line-height: var(--lk-notification-icon-size);
      color: var(--lk-notification-title-color);
      margin: 0;
    }

    .lk-notification__content {
      font-size: var(--lk-notification-content-font-size);
      line-height: 24px;
      margin: 6px 0 0;
      color: var(--lk-notification-content-color);
    }
  }

  .lk-notification__close {
    position: absolute;
    top: 18px;
    right: 15px;
    cursor: pointer;
    color: var(--lk-notification-close-color);
    font-size: var(--lk-notification-close-font-size);
  }
}

@each $val in info, success, warning, danger {
  .lk-notification--$(val) {
    --lk-notification-icon-color: var(--lk-color-$(val));
    color: var(--lk-notification-icon-color);
  }
}

.lk-notification-fade-enter-from {
  right: 0;
  transform: translate(100%);
}

.lk-notification-fade-leave-to {
  opacity: 0;
}
